<template>
	<div>
		<el-table
			:data='tableData'>
				  <!--多选列-->
			     <el-table-column
	                        v-if='selectionShow'
	                        type="selection"
	                        width="50"
	                        align="center"
	                        highlight-current-row>
	             </el-table-column>
	             <!--自定义添加排序列-->
                <el-table-column
                        v-if='indexShow'
                        align="center"
                        :label="indexLabel"
                        :width="indexWidth">
                    <template slot-scope="scope">
                    	<span>{{scope.$index + 1}} </span>
                    </template>
                </el-table-column>
				<el-table-column
                        v-for="(item, index) in tableHead"
                        :header-align="item.headerAlign"
                        :align="item.align"
                        :key="index"
                        :fixed="item.fixed"
                        :width="ColumnWidth(item)"
                        :prop="item.prop"
                        :label="item.label"
                        :sortable="item.sortable" >
                        <div class="showTable" style="min-height: 20px;">
                                <div 
                                :title="scope.row[item.prop]"
                                 v-html="normalFormatter(item.prop,scope.row[item.prop],item)">{{scope.row[item.prop]}}</div>
                            </div>
               </el-table-column>        
		</el-table>
	</div>
</template>

<script>
	export default {
		props:{
			indexShow: Boolean, // 是否显示排序列
            selectionShow: Boolean, // 是否显示多选列
            indexLabel: null, // 排序列名称
            indexWidth: null, // 排序列宽度
            tableHead: Array,  // 表头数据
            tableData: Array, // 表格数据
		},
		data(){
			return{
				
			}
		},
		 watch: {
		    // 监听表格数据
		 	tableData: {
		 		handler(val, oldVal) {
		 			this.tableData= val
		 		}
		 	},
		 	// 监听表头数据 
		 	tableHead: {
		 		handler(val, oldVal) {
		 			this.tableHead= val
		 		}
		 	}
		 }

	}
</script>